 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>index页面</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <style type="text/css">
        html,body{width:100%;height: 100%;font-size: 20px !important;}
        .aui-bar-nav{background: #fff !important;color: #333 !important;}
        #aui-footer .aui-bar-tab-item .icon{background-size: 23px 23px;background-repeat: no-repeat;width: 23px;
          height: 23px;display: block;margin: 0.35rem auto 0.1rem;}
        #aui-footer .aui-bar-tab-item .aui-bar-tab-label{color: #333;}
        #aui-footer .aui-bar-tab-item:nth-child(1) .icon{background-image: url(./image/tabbar_icon_home_normal.png); }
        #aui-footer .aui-bar-tab-item:nth-child(2) .icon{background-image: url(./image/tabbar_classification_normal.png);}
        #aui-footer .aui-bar-tab-item:nth-child(3) .icon{background-image: url(./image/tabbar_icon_task_normal.png);}
        #aui-footer .aui-bar-tab-item:nth-child(4) .icon{background-image: url(./image/tabbar_icon_mine_normal.png);}
        #aui-footer .aui-bar-tab-item.aui-active .aui-bar-tab-label{color:#ff3a24 !important;}
        #aui-footer .aui-bar-tab-item.aui-active:nth-child(1) .icon{background-image: url(./image/tabbar_icon_home_selected.png) !important; }
        #aui-footer .aui-bar-tab-item.aui-active:nth-child(2) .icon{background-image: url(./image/tabbar_icon_classification_selected.png) !important; }
        #aui-footer .aui-bar-tab-item.aui-active:nth-child(3) .icon{background-image: url(./image/tabbar_icon_task_selected.png) !important; }
        #aui-footer .aui-bar-tab-item.aui-active:nth-child(4) .icon{background-image: url(./image/tabbar_icon_mine_selected.png) !important; }
    </style>
</head>
<body>
    <!-- 顶部导航展示 -->
    <header class="aui-bar aui-bar-nav aui-bar-theme" id="aui-header">
    </header>
    <footer class="aui-bar aui-bar-tab" id="aui-footer">
        <div class="aui-bar-tab-item aui-active" id="aui-footer-home" tapmode onclick="openFrameFun('home','home_main','./html/home/main.html')">
            <div class="icon"></div>
            <div class="aui-bar-tab-label">首页</div>
        </div>
        <div class="aui-bar-tab-item" id="aui-footer-category" tapmode onclick="openFrameFun('category','category_main','./html/category/main.html')">
            <div class="icon"></div>
            <div class="aui-bar-tab-label">分类</div>
        </div>
        <div class="aui-bar-tab-item" id="aui-footer-task" tapmode onclick="openFrameFun('task','task_main','./html/task/main.html')">
            <div class="icon"></div>
            <div class="aui-bar-tab-label">任务</div>
        </div>
        <div class="aui-bar-tab-item" id="aui-footer-me" tapmode onclick="openFrameFun('me','me_main','./html/me/main.html')">
            <div class="icon"></div>
            <div class="aui-bar-tab-label">我的</div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
var openNowPage = '';//当前打开的frm页面
var openBeforePage = '';//上一个打开的frm页面
var openFrameArr = [];//首页打开的frm组名字数组
apiready = function () {
    //解析元素 tapmode 属性，优化点击事件处理 - 第四步
    api.parseTapmode();
    // 设置顶部状态栏的颜色
    api.setStatusBarStyle({
        style: 'dark',
        color: "rgba(0,0,0,0)"
    });
    //首页顶部适配
    $api.fixStatusBar($api.dom('header'));
    //适配iphoneX底部
    $api.fixTabBar($api.dom('footer'));
    //获取系统配置
    configInfo();
    //判断粘贴板是否有内容，并弹出提示框
    resume("root");
    //初始化百川
    var aliBC = api.require('aliBC');
    aliBC.asyncInit({},function(ret,err){});
    //初始化京东联盟
    var uzkJDopen = api.require('uzkJDopen');
    uzkJDopen.init(function(ret, err) {});
    //判断用户是否登录获取用户信息
    if (isLogin()) {memberInfo()}
    //加载首页
    openFrameFun('home','home_main','./html/home/main.html');
    $api.setStorage('homeIndexShow', 'home');//打开index页面的名字
    //启动3秒自动关闭启动页
    setTimeout(function() {
        api.removeLaunchView({
            animation: {
                type: 'none',
                duration: 500
            }
        });
    }, 3000)
    // app点击返回键退出监听
    exitApp();
};
// 控制打开首页frm对应页面
function openFrameFun(modulename,name,url){
    if (modulename == 'me' || modulename == 'task') {
        if (!whetherLogin()) {
            return false;
        }else if(modulename == 'me'){ //点击我的
            api.sendEvent({
                name: 'accountAmount',
            });
        }
    }
    homeIndexShow = modulename; //打开index页面的名字
    randomSwitchBtnFun(modulename); //按钮选中样式修改
    openBeforePage = openNowPage; // 之前打开的页面的名字
    openNowPage = name; //当前打开页面的名字
    if(openBeforePage == openNowPage){ //点击相同页面
        return
    }
    if(isOpen(name)){//当前frm页面已经打开 则设置显示在最外层
        //已经打开的frm设置显示出来即可
        api.setFrameAttr({
            name: name,
            hidden: false
        });
    }else { //当前frm页面未打开 则打开
        api.openFrame({
            name: name,
            url: url,
            rect: {
                marginLeft:0,    //相对父页面左外边距的距离，数字类型
                marginTop:0,     //相对父页面上外边距的距离，数字类型
                marginBottom:$api.dom("#aui-footer").offsetHeight,  //相对父页面下外边距的距离，数字类型
                marginRight:0    //相对父页面右外边距的距离，数
            },
            bounces: false,
            opaque: true,
            vScrollBarEnabled: false,
            customRefreshHeader: 'UIPullRefreshFlash',
            softInputBarEnabled: false, //是否显示键盘上方的工具条。只支持iOS
            reload: true
        });
    }
    if(openBeforePage != ''){   //判断是否打开过之前的页面，如果有则隐藏掉
        api.setFrameAttr({
            name: openBeforePage,
            hidden: true
        });
    }
}
// 判断当前frm页面是否打开
function isOpen(name){
    for(let i = 0; i < openFrameArr.length; i++){
        if(openFrameArr[i] == name){
            return true
        }
    }
    openFrameArr.push(name);
    return false
}
//底部tab按钮选中样式修改
function randomSwitchBtnFun(modulename){
    modulename = 'aui-footer-' + modulename;
    //隐藏底部之前选中样式
    document.getElementsByClassName("aui-active")[0].className = "aui-bar-tab-item";
    //显示底部
    document.getElementById(modulename).className = "aui-bar-tab-item aui-active";
}
/*监听退出应用程序监听设备的返回键*/
function exitApp() {
    api.addEventListener({
        name: 'keyback'
    }, function(ret, err) {
        // 判断是否弹出某些弹框页面，关闭才能执行退出app
        if (api.frames().findIndex(item => {return item.name == "think_find"}) != -1) {
            api.setFrameAttr({
                name: 'think_find',
                bgColor: "rgba(0,0,0,0)"
            });
            api.closeFrame({
                name: "think_find"
            });
        }else if (api.frames().findIndex(item => {return item.name == "searchGoods_frm"}) != -1) {
            api.setFrameAttr({
                name: 'searchGoods_frm',
                bgColor: "rgba(0,0,0,0)"
            });
            api.closeFrame({
                name: "searchGoods_frm"
            });
        }else if (api.frames().findIndex(item => {return item.name == "popup"}) != -1) {
            api.setFrameAttr({
                name: 'popup',
            });
            api.closeFrame({
                name: "popup"
            });
        }else if (api.frames().findIndex(item => {return item.name == "explain"}) != -1) {
            api.setFrameAttr({
                name: 'explain',
            });
            api.closeFrame({
                name: "explain"
            });
        }else if (api.frames().findIndex(item => {return item.name == "me_fx" }) != -1) {
            api.setFrameAttr({
                name: 'me_fx',
                bgColor: "rgba(0,0,0,0)"
            });
            api.closeFrame({
                name: "me_fx"
            });
        } else {
            api.toast({
                msg: '再按一次返回键退出' + api.appName,
                duration: 2000,
                location: 'middle'
            });
            //关闭指定 app
            api.addEventListener({
                name: 'keyback'
            }, function(ret, err) {
                api.closeWidget({
                });
            });
            // 三秒后复原
            setTimeout(function() {exitApp();
            }, 3000)
        }
    });
}
</script>
</html>
